<template>
    <admin-main :breadcrumbs="breadcrumbs">
        <div v-for="card in dataCard" :key="card.id" class="col-lg-3">
            <data-card :header="card.header" :labelClass="card.labelClass" :label="card.label"
                       :numerial="card.numerial" :type="card.bType" :icon="card.bIcon"
                       :ratio="card.ratio"></data-card>
        </div>
        <div class="col-lg-6">
            <fold-panel title="Line Chart Example" id="linePanel">
                <chart id="lineChart" :barData="lineData" type="line"></chart>
            </fold-panel>
        </div>
        <div class="col-lg-6">
            <fold-panel title="Bar Chart Example" id="barPanel">
                <chart id="barChart" :barData="barData" type="bar"></chart>
            </fold-panel>
        </div>
        <div class="col-lg-12">
            <fold-panel title="Radar Chart Example" id="radarPanel">
                <div style="width: 500px; height: 500px; margin: 0 auto;">
                    <chart id="radarChart" :barData="radarData" type="radar"></chart>
                </div>
            </fold-panel>
        </div>
    </admin-main>
</template>

<script>
    /* eslint-disable quotes,no-undef */
    import AdminMain from './AdminMain.vue';
    import DataCard from 'vue-fiu-ui/src/main/js/components/widget/DataCard';
    import FoldPanel from 'vue-fiu-ui/src/main/js/components/panel/FoldPanel';
    import Chart from 'vue-fiu-ui/src/main/js/components/chart/Chart.vue';

    export default {
        data () {
            return {
                dataCard: [
                    {
                        header: 'Income',
                        labelClass: 'label-success ',
                        label: 'Monthly',
                        numerial: '40 886,200',
                        bType: 'Total income',
                        bIcon: 'fa-bolt text-success',
                        ratio: '98%'
                    },
                    {
                        header: 'Orders',
                        labelClass: 'label-info',
                        label: 'Annual',
                        numerial: '275,800',
                        bType: 'New Order',
                        bIcon: 'fa-level-up text-success',
                        ratio: '20%'
                    },
                    {
                        header: 'visits',
                        labelClass: 'label-info',
                        label: 'Today',
                        numerial: '106,120',
                        bType: 'New visits',
                        bIcon: 'fa-level-up text-success',
                        ratio: '44%'
                    },
                    {
                        header: 'User activity',
                        labelClass: 'label-danger',
                        label: 'Low value',
                        numerial: '80,600',
                        bType: 'In first month',
                        bIcon: 'fa-level-down text-danger',
                        ratio: '38%'
                    }
                ],
                lineData: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'Data 1',
                            backgroundColor: 'rgba(26,179,148,0.5)',
                            borderColor: 'rgba(26,179,148,0.7)',
                            pointBackgroundColor: 'rgba(26,179,148,1)',
                            pointBorderColor: '#fff',
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }, {
                            label: 'Data 2',
                            backgroundColor: 'rgba(220, 220, 220, 0.5)',
                            pointBorderColor: '#fff',
                            data: [65, 59, 80, 81, 56, 55, 40]
                        }
                    ]
                },
                barData: {
                    labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
                    datasets: [
                        {
                            label: 'Data 1',
                            backgroundColor: 'rgba(220, 220, 220, 0.5)',
                            pointBorderColor: '#fff',
                            data: [65, 59, 80, 81, 56, 55, 40]
                        },
                        {
                            label: 'Data 2',
                            backgroundColor: 'rgba(26,179,148,0.5)',
                            borderColor: 'rgba(26,179,148,0.7)',
                            pointBackgroundColor: 'rgba(26,179,148,1)',
                            pointBorderColor: '#fff',
                            data: [28, 48, 40, 19, 86, 27, 90]
                        }
                    ]
                },
                radarData: {
                    labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
                    datasets: [
                        {
                            label: 'My First dataset',
                            backgroundColor: 'rgba(220,220,220,0.2)',
                            borderColor: 'rgba(220,220,220,1)',
                            data: [65, 59, 90, 81, 56, 55, 40]
                        },
                        {
                            label: 'My Second dataset',
                            backgroundColor: 'rgba(26,179,148,0.2)',
                            borderColor: 'rgba(26,179,148,1)',
                            data: [28, 48, 40, 19, 96, 27, 100]
                        }
                    ]
                },
                breadcrumbs: {
                    title: 'DashBoard',
                    data: [
                        {to: {name: 'Home'}, icon: 'fa-home', cut: true, disabled: false, text: 'Home'},
                        {to: '#', cut: false, disabled: true, text: 'DashBoard'}
                    ]
                }
            };
        },
        methods: {},
        components: {
            Chart,
            FoldPanel,
            DataCard,
            AdminMain
        },
        mounted () {
            document.title = 'DashBoard ' + document.title;
        }
    };
</script>
